<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>电子日历的设计与实现</title>
<link rel="stylesheet" type="text/css" href="day.css">
</head>
<body onload="showDate()">
	<h3>简单电子日历的设计与实现</h3>
	<hr/>
	<div id="calendar">
		<!--状态栏-->
	 <div>
		<!--显示上个月按钮-->
		<button id="button1" onclick="lastMonth()">上个月</button>
		<!--显示当前年份和月份-->
		<div id="month"></div>
		<!--显示下个月按钮-->
		<button id="button2" onclick="nextMonth()">下个月</button>
	 </div>
		<!--显示星期几-->
	  <div>
		 <div class="everyday">日</div>
	    <div class="everyday">一</div>
		 <div class="everyday">二</div>
		 <div class="everyday">三</div>
		 <div class="everyday">四</div>
		 <div class="everyday">五</div>
		 <div class="everyday">六</div>
	   </div>
		<!--显示当前月份每天的日期-->
		<div id="day"></div>
	</div>
	<script>
	var today = new Date();
	var year = today.getFullYear();//获取当前年份
	var month = today.getMonth()+1;//获取当前月份
	var day = today.getDate();//获取当前日期
   console.log(day);
	//显示日历标题中的当前年份和月份
	function showMonth() {
	var year_month= year + "年" + month + "月";
	   document.getElementById("month").innerHTML=year_month;
	  //  month.innerHTML=year_month;
   }
   var allday=0;//当前月份的总天数

   //用于推算当前月份一共多少天
   function count(){
   	if(month!=2){
   		if((month==4)||(month==6)||(month==9)||(month==11)){
   			allday=30;
   		}else{
   			allday=31;
   		}
   	}else{
   		//如果是二月份，需要判断当前年份是否为闰年
   		if(((year%4)==0&&(year%100)!=0)||(year%400)==0){
   			allday=29;//闰年2月份是29天
   		}else{
   			allday=28;//平年2 月份是28天
   		}
   	}
   } 
   //显示当前月份的日历
   function showDate(){
   	showMonth();
   	count();
   	//获取本月的第一天的日期对象
   	var firstdate=new Date(year,month-1,1);
      console.log(firstdate);
   	//推算本月的第一天是星期几
   	var xiqi=firstdate.getDay();
      console.log(xiqi);
   	var daterow=document.getElementById("day");
   	daterow.innerHTML="";

   	//如果本月的第一天不是星期日，则前面需要用空白元素补全日期
   	if(xiqi!=0){
   		for(var i=0;i<xiqi;i++){
   			var dayElement=document.createElement("div");
   			dayElement.className="everyday";
   			daterow.appendChild(dayElement);
   		}
   	}
   	//使用循环语句将当前月份的所有日期显示出来
   	for(var j=1;j<=allday;j++){
   		var dayElement=document.createElement("div");
   		dayElement.className="everyday";
   		dayElement.innerHTML=j+"";

   		//如果日期为今天，将内容显示为红色
   		if(j==day){
   			dayElement.style.color="red";
   		}
   		daterow.appendChild(dayElement);
   	}
   }
   //显示上个月的日历
   function lastMonth(){
   	if(month>1){
   		month-=1;
   	}else{
   		month=12;
   		year-=1;
   	}
   	showDate();
   }
   //显示下个月的日历
   function nextMonth(){
   	if(month>11){
   		year=year+1;
   		month=1;
   	}else{
   		month+=1;
   	}
   	showDate();
   }
</script>
</body>
</html>